<template>
  <div class="bg-white rounded-xl shadow-sm p-5">
    <div class="flex justify-between items-center mb-4">
      <h3 class="text-lg font-semibold text-gray-800">参与社区</h3>
      <div class="flex items-center space-x-2">
        <button
            class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-500 hover:text-[#5cd3a3] hover:border-[#b1fac6] transition-colors"
            :class="{ 'opacity-50 cursor-not-allowed': currentPage === 1 }"
            :disabled="currentPage === 1"
            @click="changePage(currentPage - 1)">
          <i class="fa fa-chevron-left"></i>
        </button>
        <span class="text-xs text-gray-500">{{ currentPage }}/{{ totalPages }}</span>
        <button
            class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-200 text-gray-500 hover:text-[#5cd3a3] hover:border-[#b1fac6] transition-colors"
            :class="{ 'opacity-50 cursor-not-allowed': currentPage === totalPages }"
            :disabled="currentPage === totalPages"
            @click="changePage(currentPage + 1)">
          <i class="fa fa-chevron-right"></i>
        </button>
      </div>
    </div>

    <div class="grid grid-cols-6 gap-3">
      <div
          v-for="(community, index) in paginatedCommunities"
          :key="community.id"
          class="community-card group"
          @click="handleCommunityClick(community.id)"
      >
        <div
            :class="getCommunityCardClass(index)"
            class="rounded-lg p-3 text-center border border-gray-100 transition-all duration-300"
            @mouseenter="hoveredIndex = index"
            @mouseleave="hoveredIndex = null"
        >
          <div class="w-12 h-12 mx-auto mb-2 rounded-full overflow-hidden bg-white border-2">
            <img :src="community.avatar" :alt="community.name" class="w-full h-full object-cover">
          </div>
          <p class="text-xs font-medium text-gray-700 truncate">{{ community.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { communitiesData } from "@/mock/communityData";

export default {
  name: "ParticipatingCommunities",
  data() {
    return {
      communities: communitiesData,
      currentPage: 1,
      itemsPerPage: 6,
      hoveredIndex: null,
      selectedCommunityId: null,
      communityColors: [
        'bg-gradient-to-br from-[#7feaa9] to-[#b1fac6]',
        'bg-gradient-to-br from-[#b1fac6] to-[#94e4d4]',
        'bg-gradient-to-br from-[#94e4d4] to-[#79c2a5]',
        'bg-gradient-to-br from-[#79c2a5] to-[#91f0d0]',
        'bg-gradient-to-br from-[#91f0d0] to-[#5cd3a3]',
        'bg-gradient-to-br from-[#5cd3a3] to-[#7feaa9]'
      ]
    };
  },
  computed: {
    paginatedCommunities() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.communities.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.communities.length / this.itemsPerPage);
    }
  },
  methods: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page;
        this.selectedCommunityId = null; // 翻页时重置选中状态
      }
    },
    handleCommunityClick(communityId) {
      // 点击时切换选中状态
      this.selectedCommunityId = this.selectedCommunityId === communityId ? null : communityId;
      console.log("点击了社区:", communityId);
    },
    getCommunityCardClass(index) {
      const community = this.paginatedCommunities[index];
      const isHovered = this.hoveredIndex === index;
      const isSelected = this.selectedCommunityId === community.id;

      // 默认状态：白色背景，无阴影
      let classes = "bg-white";

      // 悬停或选中状态：应用渐变色和阴影效果
      if (isHovered || isSelected) {
        const colorIndex = index % this.communityColors.length;
        classes = `${this.communityColors[colorIndex]} shadow-md transform -translate-y-1`;
      }

      return classes;
    }
  }
};
</script>

<style scoped>
.community-card {
  cursor: pointer;
  transition: all 0.3s ease;
}

.community-card:hover > div {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
</style>
